<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "animationView",
    data(){
        return{
            flag:true,
            show:true,
            isshow:true,
            list:[5,6,7,8,9]
        }
    },
    methods:{
        add(){
            this.list.push(this.list[this.list.length-1]+1)
        },
        // 动画进入之前的回调 el就是绑定的该元素element
        beforeEnter(el){
            el.style.transform = 'translateX(500px)';
        },
        // 动画进入完成时候的回调函数 el同上 done是完成后调用的一个函数
        enter(el,done){
            el.offsetWidth;
            el.style.transform = 'translateX(0px)';
            done()
        },
        afterEnter(){
            this.isshow = !this.isshow;
        }
    }
})
</script>

<template>
<div  class="container">
<!--    定义一个动画的时候需要把过度的动画放在transition-->
    <button @click="flag=!flag">changeFlag</button>
    <transition>
        <div class="box" v-if="flag"></div>
    </transition>

    <transition
            enter-active-class="fadeInRight"
            leave-active-class="fadeOutRight"
            :duration="{ enter: 500, leave: 800 }">
        <div class="animated" v-show="isshow">动画哦</div>
    </transition>
<!--当你要动画多个div时就需要使用transition-group-->
    <transition-group>
        <div v-for="item in list" :key="item">
            {{item}}
        </div>
    </transition-group>
</div>
</template>
<!--scoped是样式隔离的效果 当你写多个东西的时候如果名字一样起到不会重复的效果-->
<style scoped lang="less">
.box{
    width: 300px;
    height: 300px;
    background-color: #42b983;
}
.v-enter{
    transform: translateX(500px);
}
.v-enter-to{
    transform: translateX(0);
}
.v-enter-active{
    transition: 3s all;
}

.v-leave{
    transform: translateX(-500px);
}
.v-leave-to{
    transform: translateX(0);
}
.v-leave-active{
    transition: 3s all;
}
</style>